<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>社交圈 - 发现精彩内容</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #4263eb;
            --primary-light: #637ef3;
            --secondary: #fa5252;
            --gray-100: #f8f9fa;
            --gray-200: #e9ecef;
            --gray-300: #dee2e6;
            --gray-600: #6c757d;
            --gray-800: #343a40;
            --text-primary: #212529;
            --text-secondary: #6c757d;
            --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
            --shadow: 0 4px 6px rgba(0,0,0,0.05);
            --radius: 12px;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #f5f7fa;
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 60px;
        }
        
        /* 导航栏样式 */
        .main-nav {
            height: 56px;
            background-color: white;
            border-bottom: 1px solid var(--gray-200);
            z-index: 1030;
        }
        
        .logo {
            color: var(--primary);
            font-weight: 700;
            font-size: 1.25rem;
        }
        
        .nav-actions {
            display: flex;
            gap: 18px;
            font-size: 1.2rem;
        }
        
        .nav-actions i {
            color: var(--gray-800);
        }
        
        /* 分类标签栏 */
        .category-tabs {
            overflow-x: auto;
            background-color: white;
            border-bottom: 1px solid var(--gray-200);
            padding: 12px 16px;
            scrollbar-width: none;
        }
        
        .category-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .category-tab {
            padding: 6px 16px;
            margin-right: 10px;
            white-space: nowrap;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text-secondary);
            transition: all 0.2s;
        }
        
        .category-tab.active {
            background-color: var(--primary);
            color: white;
        }
        
        /* 通用文章样式 */
        .section-header {
            padding: 16px;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .article-feed {
            background-color: white;
            margin-bottom: 16px;
        }
        
        .article-item {
            padding: 16px;
            border-bottom: 1px solid var(--gray-100);
            transition: background-color 0.2s;
        }
        
        .article-item:last-child {
            border-bottom: none;
        }
        
        .article-item:hover {
            background-color: var(--gray-100);
        }
        
        .article-author {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .author-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 10px;
        }
        
        .author-name {
            font-weight: 500;
            font-size: 0.9rem;
        }
        
        .post-time {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-left: auto;
        }
        
        .article-actions {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-top: 12px;
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            transition: color 0.2s;
        }
        
        .action-btn:hover {
            color: var(--primary);
        }
        
        .article-title {
            font-weight: 600;
            margin-bottom: 8px;
            line-height: 1.4;
        }
        
        .article-excerpt {
            font-size: 0.9rem;
            color: var(--text-secondary);
            line-height: 1.5;
        }
        
        /* 1. 大图文章样式 */
        .large-image {
            width: 100%;
            border-radius: var(--radius);
            overflow: hidden;
            margin: 12px 0;
        }
        
        .large-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* 2. 多图文章样式 */
        .multi-image-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
            margin: 12px 0;
            border-radius: var(--radius);
            overflow: hidden;
        }
        
        .multi-image-grid img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            aspect-ratio: 1/1;
        }
        
        /* 3. 左侧配图样式 */
        .left-image-layout {
            display: flex;
            gap: 12px;
        }
        
        .left-image {
            width: 96px;
            height: 96px;
            border-radius: var(--radius);
            overflow: hidden;
            flex-shrink: 0;
        }
        
        .left-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .left-image-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        /* 4. 右侧配图样式 */
        .right-image-layout {
            display: flex;
            flex-direction: row-reverse;
            gap: 12px;
        }
        
        .right-image {
            width: 96px;
            height: 96px;
            border-radius: var(--radius);
            overflow: hidden;
            flex-shrink: 0;
        }
        
        .right-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 5. 纯文字样式 */
        .text-only .article-excerpt {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        /* 6. 卡片式样式 */
        .card-style {
            margin: 0 16px 16px;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            background-color: white;
        }
        
        .card-media {
            width: 100%;
            height: 180px;
            position: relative;
        }
        
        .card-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .card-category {
            position: absolute;
            top: 12px;
            left: 12px;
            background-color: rgba(0,0,0,0.6);
            color: white;
            font-size: 0.75rem;
            padding: 3px 8px;
            border-radius: 4px;
        }
        
        .card-content {
            padding: 16px;
        }
        
        .card-actions {
            padding: 0 16px 16px;
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        
        /* 7. 短视频样式 */
        .video-item {
            position: relative;
        }
        
        .video-thumbnail {
            width: 100%;
            border-radius: var(--radius);
            overflow: hidden;
            margin: 12px 0;
        }
        
        .video-thumbnail img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        .play-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 48px;
            height: 48px;
            background-color: rgba(0,0,0,0.6);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
        
        .video-duration {
            position: absolute;
            bottom: 24px;
            right: 24px;
            background-color: rgba(0,0,0,0.7);
            color: white;
            font-size: 0.75rem;
            padding: 2px 6px;
            border-radius: 4px;
        }
        
        /* 8. 引用卡片样式 */
        .quote-card {
            border-left: 3px solid var(--primary);
            padding: 12px 16px;
            background-color: rgba(66, 99, 235, 0.05);
            border-radius: 0 var(--radius) var(--radius) 0;
            margin: 12px 0;
        }
        
        .quote-text {
            font-style: italic;
            color: var(--gray-800);
            font-size: 0.95rem;
        }
        
        .quote-source {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-top: 8px;
            text-align: right;
        }
        
        /* 加载更多按钮 */
        .load-more {
            padding: 16px;
            text-align: center;
        }
        
        .load-more-btn {
            background-color: white;
            border: 1px solid var(--primary);
            color: var(--primary);
            padding: 8px 24px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .load-more-btn:hover {
            background-color: var(--primary);
            color: white;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: white;
            border-top: 1px solid var(--gray-200);
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 1030;
        }
        
        .nav-tab {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 0.7rem;
            color: var(--text-secondary);
            text-decoration: none;
        }
        
        .nav-tab i {
            font-size: 1.2rem;
            margin-bottom: 4px;
        }
        
        .nav-tab.active {
            color: var(--primary);
        }
        
        /* 适配不同屏幕 */
        @media (max-width: 360px) {
            .article-title {
                font-size: 0.95rem;
            }
            
            .card-media {
                height: 150px;
            }
        }
        
        @media (min-width: 414px) {
            .card-media {
                height: 200px;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar main-nav fixed-top px-4">
        <div class="container-fluid d-flex justify-content-between align-items-center">
            <div class="logo">社交圈</div>
            <div class="nav-actions">
                <i class="fas fa-search"></i>
                <i class="fas fa-bell"></i>
                <i class="fas fa-user-circle"></i>
            </div>
        </div>
    </nav>
    
    <!-- 分类标签栏 -->
    <div class="category-tabs d-flex">
        <div class="category-tab active">推荐</div>
        <div class="category-tab">关注</div>
        <div class="category-tab">热点</div>
        <div class="category-tab">科技</div>
        <div class="category-tab">美食</div>
        <div class="category-tab">旅行</div>
        <div class="category-tab">娱乐</div>
        <div class="category-tab">体育</div>
        <div class="category-tab">财经</div>
    </div>
    
    <!-- 1. 大图文章列表 -->
    <section>
        <h2 class="section-header">精选推荐</h2>
        <div class="article-feed">
            <div class="article-item">
                <div class="article-author">
                    <img src="https://picsum.photos/id/64/100" alt="作者头像" class="author-avatar">
                    <span class="author-name">城市探索家</span>
                    <span class="post-time">2小时前</span>
                </div>
                <h3 class="article-title">春日限定：隐藏在城市中的十大赏花胜地</h3>
                <p class="article-excerpt">随着气温回升，城市里的花朵悄然绽放。本文精选了十处人少景美的赏花胜地，让你在繁忙的都市生活中也能邂逅春日浪漫...</p>
                <div class="large-image">
                    <img src="https://picsum.photos/id/106/800/500" alt="春日赏花">
                </div>
                <div class="article-actions">
                    <div class="action-btn"><i class="far fa-heart"></i> 342</div>
                    <div class="action-btn"><i class="far fa-comment"></i> 56</div>
                    <div class="action-btn"><i class="far fa-share-square"></i> 28</div>
                    <div class="action-btn"><i class="far fa-bookmark"></i></div>
                </div>
            </div>
            
            <div class="article-item">
                <div class="article-author">
                    <img src="https://picsum.photos/id/91/100" alt="作者头像" class="author-avatar">
                    <span class="author-name">摄影爱好者</span>
                    <span class="post-time">昨天</span>
                </div>
                <h3 class="article-title">如何用手机拍摄出专业级的日落照片</h3>
                <p class="article-excerpt">日落是最容易拍出惊艳照片的场景之一，但很多人用手机拍出来却不尽如人意。本文分享几个简单技巧，让你的日落照片在朋友圈脱颖而出...</p>
                <div class="large-image">
                    <img src="https://picsum.photos/id/1059/800/500" alt="日落摄影">
                </div>
                <div class="article-actions">
                    <div class="action-btn"><i class="far fa-heart"></i> 876</div>
                    <div class="action-btn"><i class="far fa-comment"></i> 124</div>
                    <div class="action-btn"><i class="far fa-share-square"></i> 325</div>
                    <div class="action-btn"><i class="far fa-bookmark"></i></div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 2. 多图文章列表 -->
    <section>
        <h2 class="section-header">旅行见闻</h2>
        <div class="article-feed">
            <div class="article-item">
                <div class="article-author">
                    <img src="https://picsum.photos/id/26/100" alt="作者头像" class="author-avatar">
                    <span class="author-name">环球旅行者</span>
                    <span class="post-time">3天前</span>
                </div>
                <h3 class="article-title">云南小众旅行地：那些未被过度开发的秘境</h3>
                <p class="article-excerpt">除了大理丽江，云南还有这些宝藏旅行地。人少景美，能让你真正体验到原生态的自然风光和民族文化...</p>
                <div class="multi-image-grid">
                    <img src="https://picsum.photos/id/10/300" alt="云南风景1">
                    <img src="https://picsum.photos/id/15/300" alt="云南风景2">
                    <img src="https://picsum.photos/id/28/300" alt="云南风景3">
                </div>
                <div class="article-actions">
                    <div class="action-btn"><i class="far fa-heart"></i> 567</div>
                    <div class="action-btn"><i class="far fa-comment"></i> 98</div>
                    <div class="action-btn"><i class="far fa-share-square"></i> 215</div>
                    <div class="action-btn"><i class="far fa-bookmark"></i></div>
                </div>
            </div>
            
            <div class="article-item">
                <div class="article-author">
                    <img src="https://picsum.photos/id/65/100" alt="作者头像" class="author-avatar">
                    <span class="author-name">美食探店</span>
                    <span class="post-time">4天前</span>
                </div>
                <h3 class="article-title">上海老街巷里的5家老字号小吃，本地人私藏</h3>
                <p class="article-excerpt">避开网红打卡地，这些藏在上海老街巷里的老字号才是真正的美味。每一家都有几十年历史，承载着老上海的味道记忆...</p>
                <div class="multi-image-grid">
                    <img src="https://picsum.photos/id/292/300" alt="上海小吃1">
                    <img src="https://picsum.photos/id/431/300" alt="上海小吃2">
                    <img src="https://picsum.photos/id/312/300" alt="上海小吃3">
                </div>
                <div class="article-actions">
                    <div class="action-btn"><i class="far fa-heart"></i> 632</div>
                    <div class="action-btn"><i class="far fa-comment"></i> 156</div>
                    <div class="action-btn"><i class="far fa-share-square"></i> 421</div>
                    <div class="action-btn"><i class="far fa-bookmark"></i></div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 3. 左侧配图文章列表 -->
    <section>
        <h2 class="section-header">科技资讯</h2>
        <div class="article-feed">
            <div class="article-item left-image-layout">
                <div class="left-image">
                    <img src="https://picsum.photos/id/180/300" alt="科技新闻图片">
                </div>
                <div class="left-image-content">
                    <div class="article-author" style="margin-bottom: 8px;">
                        <img src="https://picsum.photos/id/45/100" alt="作者头像" class="author-avatar" style="width: 28px; height: 28px;">
                        <span class="author-name" style="font-size: 0.85rem;">科技前沿</span>
                        <span class="post-time" style="font-size: 0.75rem;">1小时前</span>
                    </div>
                    <h3 class="article-title" style="font-size: 0.95rem;">最新研究：AI辅助诊断系统准确率超过资深医生</h3>
                    <p class="article-excerpt" style="font-size: 0.85rem; margin-bottom: auto;">一项发表在《自然》杂志的研究显示，新型AI辅助诊断系统在某些疾病的识别准确率上已经超过了资深医生...</p>
                    <div class="article-actions" style="font-size: 0.8rem; margin-top: 8px;">
                        <div class="action-btn"><i class="far fa-heart"></i> 1243</div>
                        <div class="action-btn"><i class="far fa-comment"></i> 321</div>
                    </div>
                </div>
            </div>
            
            <div class="article-item left-image-layout">
                <div class="left-image">
                    <img src="https://picsum.photos/id/239/300" alt="科技产品图片">
                </div>
                <div class="left-image-content">
                    <div class="article-author" style="margin-bottom: 8px;">
                        <img src="https://picsum.photos/id/67/100" alt="作者头像" class="author-avatar" style="width: 28px; height: 28px;">
                        <span class="author-name" style="font-size: 0.85rem;">数码测评</span>
                        <span class="post-time" style="font-size: 0.75rem;">5小时前</span>
                    </div>
                    <h3 class="article-title" style="font-size: 0.95rem;">新一代折叠屏手机评测：续航提升明显，价格更亲民</h3>
                    <p class="article-excerpt" style="font-size: 0.85rem; margin-bottom: auto;">最新发布的折叠屏手机在解决了前代产品的诸多问题，尤其是续航能力提升明显，同时价格下降了约20%...</p>
                    <div class="article-actions" style="font-size: 0.8rem; margin-top: 8px;">
                        <div class="action-btn"><i class="far fa-heart"></i> 876</div>
                        <div class="action-btn"><i class="far fa-comment"></i> 254</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 4. 右侧配图文章列表 -->
    <section>
        <h2 class="section-header">生活技巧</h2>
        <div class="article-feed">
            <div class="article-item right-image-layout">
                <div class="right-image">
                    <img src="https://picsum.photos/id/3/300" alt="收纳技巧图片">
                </div>
                <div class="left-image-content">
                    <div class="article-author" style="margin-bottom: 8px;">
                        <img src="https://picsum.photos/id/22/100" alt="作者头像" class="author-avatar" style="width: 28px; height: 28px;">
                        <span class="author-name" style="font-size: 0.85rem;">整理收纳师</span>
                        <span class="post-time" style="font-size: 0.75rem;">2天前</span>
                    </div>
                    <h3 class="article-title" style="font-size: 0.95rem;">小户型收纳技巧：让100平米住出120平米的感觉</h3>
                    <p class="article-excerpt" style="font-size: 0.85rem; margin-bottom: auto;">通过合理的收纳设计和空间规划，小户型也能拥有宽敞的居住体验。分享几个简单实用的收纳技巧...</p>
                    <div class="article-actions" style="font-size: 0.8rem; margin-top: 8px;">
                        <div class="action-btn"><i class="far fa-heart"></i> 754</div>
                        <div class="action-btn"><i class="far fa-comment"></i> 187</div>
                    </div>
                </div>
            </div>
            
            <div class="article-item right-image-layout">
                <div class="right-image">
                    <img src="https://picsum.photos/id/20/300" alt="烹饪技巧图片">
                </div>
                <div class="left-image-content">
                    <div class="article-author" style="margin-bottom: 8px;">
                        <img src="https://picsum.photos/id/33/100" alt="作者头像" class="author-avatar" style="width: 28px; height: 28px;">
                        <span class="author-name" style="font-size: 0.85rem;">居家大厨</span>
                        <span class="post-time" style="font-size: 0.75rem;">3天前</span>
                    </div>
                    <h3 class="article-title" style="font-size: 0.95rem;">5分钟快手早餐：营养美味两不误的3种搭配</h3>
                    <p class="article-excerpt" style="font-size: 0.85rem; margin-bottom: auto;">早上时间紧张？这3种快手早餐搭配既营养又美味，做法简单，5分钟就能搞定，让你精力充沛开启新一天...</p>
                    <div class="article-actions" style="font-size: 0.8rem; margin-top: 8px;">
                        <div class="action-btn"><i class="far fa-heart"></i> 987</div>
                        <div class="action-btn"><i class="far fa-comment"></i> 213</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 5. 纯文字文章列表 -->
    <section>
        <h2 class="section-header">观点感悟</h2>
        <div class="article-feed">
            <div class="article-item text-only">
                <div class="article-author">
                    <img src="https://picsum.photos/id/55/100" alt="作者头像" class="author-avatar">
                    <span class="author-name">心灵随笔</span>
                    <span class="post-time">2天前</span>
                </div>
                <h3 class="article-title">慢下来的勇气：在快节奏时代寻找内心的平静</h3>
                <p class="article-excerpt">我们生活在一个追求速度的时代，总被"快一点"的声音催促着。但有时候，慢下来反而能让我们看得更清楚，走得更稳。学会与自己和解，接受不完美，给自己一些喘息的空间，才能在喧嚣中找到内心的平静。真正的成长不在于速度，而在于方向和深度...</p>
                <div class="article-actions">
                    <div class="action-btn"><i class="far fa-heart"></i> 432</div>
                    <div class="action-btn"><i class="far fa-comment"></i> 128</div>
                    <div class="action-btn"><i class="far fa-share-square"></i> 187</div>
                    <div class="action-btn"><i class="far fa-bookmark"></i></div>
                </div>
            </div>
            
            <div class="article-item text-only">
                <div class="article-author">
                    <img src="https://picsum.photos/id/33/100" alt="作者头像" class="author-avatar">
                    <span class="author-name">职场导师</span>
                    <span class="post-time">5天前</span>
                </div>
                <h3 class="article-title">工作十年后才明白的道理：努力很重要，但选择更重要</h3>
                <p class="article-excerpt">刚入职场时，总以为只要足够努力就能获得成功。但十年过去，见过太多努力却不得志的人，也见过一些看似轻松却发展顺利的人。慢慢明白，努力固然重要，但选择往往更能决定人生的走向。选择适合自己的赛道，选择能发挥自己优势的平台，选择与正确的人同行，这些选择带来的影响往往比单纯的努力更大...</p>
                <div class="article-actions">
                    <div class="action-btn"><i class="far fa-heart"></i> 1254</div>
                    <div class="action-btn"><i class="far fa-comment"></i> 326</div>
                    <div class="action-btn"><i class="far fa-share-square"></i> 543</div>
                    <div class="action-btn"><i class="far fa-bookmark"></i></div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 6. 卡片式文章列表 -->
    <section>
        <h2 class="section-header">热门专题</h2>
        <div class="d-flex flex-column">
            <div class="article-item card-style">
                <div class="card-media">
                    <img src="https://picsum.photos/id/325/800/500" alt="专题图片">
                    <div class="card-category">健康</div>
                </div>
                <div class="card-content">
                    <div class="article-author" style="margin-bottom: 8px;">
                        <img src="https://picsum.photos/id/22/100" alt="作者头像" class="author-avatar">
                        <span class="author-name">健康专家</span>
                        <span class="post-time">1周前</span>
                    </div>
                    <h3 class="article-title">现代人必备的5个健康习惯，简单却难以坚持</h3>
                    <p class="article-excerpt">这些简单的健康习惯不需要太多时间和金钱，但长期坚持却能带来显著的健康收益。很多人知道却做不到，看看你能坚持几个...</p>
                </div>
                <div class="card-actions">
                    <div class="action-btn"><i class="far fa-heart"></i> 2345</div>
                    <div class="action-btn"><i class="far fa-comment"></i> 456</div>
                    <div class="action-btn"><i class="far fa-share-square"></i> 876</div>
                </div>
            </div>
            
            <div class="article-item card-style">
                <div class="card-media">
                    <img src="https://picsum.photos/id/365/800/500" alt="专题图片">
                    <div class="card-category">阅读</div>
                </div>
                <div class="card-content">
                    <div class="article-author" style="margin-bottom: 8px;">
                        <img src="https://picsum.photos/id/42/100" alt="作者头像" class="author-avatar">
                        <span class="author-name">书单推荐</span>
                        <span class="post-time">2周前</span>
                    </div>
                    <h3 class="article-title">改变人生的6本经典书籍，每一本都值得反复阅读</h3>
                    <p class="article-excerpt">这些书籍涵盖了个人成长、人际关系、思维方式等多个方面，影响了千万人的人生轨迹。无论你处于人生的哪个阶段，都能从中获得启发...</p>
                </div>
                <div class="card-actions">
                    <div class="action-btn"><i class="far fa-heart"></i> 3456</div>
                    <div class="action-btn"><i class="far fa-comment"></i> 678</div>
                    <div class="action-btn"><i class="far fa-share-square"></i> 1234</div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 7. 短视频文章列表 -->
    <section>
        <h2 class="section-header">热门视频</h2>
        <div class="article-feed">
            <div class="article-item video-item">
                <div class="article-author">
                    <img src="https://picsum.photos/id/64/100" alt="作者头像" class="author-avatar">
                    <span class="author-name">户外探险</span>
                    <span class="post-time">1天前</span>
                </div>
                <h3 class="article-title">徒步穿越虎跳峡，感受大自然的壮美与挑战</h3>
                <p class="article-excerpt">记录了虎跳峡徒步全程，从清晨到黄昏，感受这条世界级徒步路线的魅力与挑战...</p>
                <div class="video-thumbnail">
                    <img src="https://picsum.photos/id/29/800/450" alt="视频缩略图">
                    <div class="play-icon">
                        <i class="fas fa-play"></i>
                    </div>
                    <div class="video-duration">08:45</div>
                </div>
                <div class="article-actions">
                    <div class="action-btn"><i class="far fa-heart"></i> 1254</div>
                    <div class="action-btn"><i class="far fa-comment"></i> 328</div>
                    <div class="action-btn"><i class="far fa-share-square"></i> 543</div>
                    <div class="action-btn"><i class="far fa-bookmark"></i></div>
                </div>
            </div>
            
            <div class="article-item video-item">
                <div class="article-author">
                    <img src="https://picsum.photos/id/65/100" alt="作者头像" class="author-avatar">
                    <span class="author-name">美食制作</span>
                    <span class="post-time">2天前</span>
                </div>
                <h3 class="article-title">3分钟学会做正宗的意大利番茄肉酱面</h3>
                <p class="article-excerpt">不用复杂的步骤，在家也能做出餐厅级别的意大利面，配料简单，做法详细...</p>
                <div class="video-thumbnail">
                    <img src="https://picsum.photos/id/292/800/450" alt="视频缩略图">
                    <div class="play-icon">
                        <i class="fas fa-play"></i>
                    </div>
                    <div class="video-duration">03:15</div>
                </div>
                <div class="article-actions">
                    <div class="action-btn"><i class="far fa-heart"></i> 2345</div>
                    <div class="action-btn"><i class="far fa-comment"></i> 654</div>
                    <div class="action-btn"><i class="far fa-share-square"></i> 987</div>
                    <div class="action-btn"><i class="far fa-bookmark"></i></div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 8. 引用卡片文章列表 -->
    <section>
        <h2 class="section-header">名人名言</h2>
        <div class="article-feed">
            <div class="article-item">
                <div class="article-author">
                    <img src="https://picsum.photos/id/55/100" alt="作者头像" class="author-avatar">
                    <span class="author-name">智慧分享</span>
                    <span class="post-time">今天</span>
                </div>
                <h3 class="article-title">关于成长的思考</h3>
                <div class="quote-card">
                    <p class="quote-text">"人生不是一场马拉松，而是无数次的短跑。每次短跑的目标不是超过别人，而是超越过去的自己。重要的不是你跑得多快，而是你能否在每次短跑后，都能重新站起来，准备下一次冲刺。"</p>
                    <p class="quote-source">— 稻盛和夫</p>
                </div>
                <p class="article-excerpt">真正的成长不在于速度，而在于持续。每天进步一点点，长期积累下来就是巨大的飞跃。</p>
                <div class="article-actions">
                    <div class="action-btn"><i class="far fa-heart"></i> 678</div>
                    <div class="action-btn"><i class="far fa-comment"></i> 123</div>
                    <div class="action-btn"><i class="far fa-share-square"></i> 345</div>
                    <div class="action-btn"><i class="far fa-bookmark"></i></div>
                </div>
            </div>
            
            <div class="article-item">
                <div class="article-author">
                    <img src="https://picsum.photos/id/55/100" alt="作者头像" class="author-avatar">
                    <span class="author-name">智慧分享</span>
                    <span class="post-time">昨天</span>
                </div>
                <h3 class="article-title">关于幸福的理解</h3>
                <div class="quote-card">
                    <p class="quote-text">"幸福不是一种状态，而是一种能力。是在平凡生活中发现美的能力，是在困境中保持乐观的能力，是与他人建立连接的能力。幸福不在于你拥有什么，而在于你如何看待自己所拥有的一切。"</p>
                    <p class="quote-source">— 罗素</p>
                </div>
                <p class="article-excerpt">幸福从来不是遥不可及的目标，而是当下就能拥有的感受。培养感知幸福的能力，比追求幸福本身更重要。</p>
                <div class="article-actions">
                    <div class="action-btn"><i class="far fa-heart"></i> 890</div>
                    <div class="action-btn"><i class="far fa-comment"></i> 234</div>
                    <div class="action-btn"><i class="far fa-share-square"></i> 567</div>
                    <div class="action-btn"><i class="far fa-bookmark"></i></div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 加载更多 -->
    <div class="load-more">
        <button class="load-more-btn">加载更多</button>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-tab active">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-tab">
            <i class="fas fa-compass"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-tab">
            <i class="fas fa-plus-circle"></i>
            <span>发布</span>
        </a>
        <a href="#" class="nav-tab">
            <i class="fas fa-bell"></i>
            <span>通知</span>
        </a>
        <a href="#" class="nav-tab">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 标签切换功能
        const categoryTabs = document.querySelectorAll('.category-tab');
        categoryTabs.forEach(tab => {
            tab.addEventListener('click', () => {
                categoryTabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                // 这里可以添加内容切换逻辑
            });
        });
        
        // 点赞功能
        const likeButtons = document.querySelectorAll('.action-btn .fa-heart');
        likeButtons.forEach(button => {
            button.addEventListener('click', (e) => {
                e.stopPropagation();
                const isLiked = button.classList.contains('fas');
                const countElement = button.nextElementSibling;
                
                if (isLiked) {
                    button.classList.remove('fas', 'text-danger');
                    button.classList.add('far');
                    countElement.textContent = parseInt(countElement.textContent) - 1;
                } else {
                    button.classList.remove('far');
                    button.classList.add('fas', 'text-danger');
                    countElement.textContent = parseInt(countElement.textContent) + 1;
                }
            });
        });
        
        // 收藏功能
        const bookmarkButtons = document.querySelectorAll('.action-btn .fa-bookmark');
        bookmarkButtons.forEach(button => {
            button.addEventListener('click', (e) => {
                e.stopPropagation();
                if (button.classList.contains('far')) {
                    button.classList.remove('far');
                    button.classList.add('fas', 'text-primary');
                } else {
                    button.classList.remove('fas', 'text-primary');
                    button.classList.add('far');
                }
            });
        });
        
        // 加载更多功能
        const loadMoreBtn = document.querySelector('.load-more-btn');
        loadMoreBtn.addEventListener('click', () => {
            loadMoreBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
            
            // 模拟加载延迟
            setTimeout(() => {
                loadMoreBtn.textContent = '加载更多';
                // 实际项目中这里会添加加载更多内容的逻辑
            }, 1500);
        });
        
        // 底部导航切换
        const navTabs = document.querySelectorAll('.nav-tab');
        navTabs.forEach(tab => {
            tab.addEventListener('click', (e) => {
                e.preventDefault();
                navTabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
            });
        });
        
        // 文章点击进入详情
        const articleItems = document.querySelectorAll('.article-item');
        articleItems.forEach(item => {
            item.addEventListener('click', () => {
                // 实际项目中这里会跳转到文章详情页
                console.log('进入文章详情页');
            });
        });
    </script>
</body>
</html>

